<!DOCTYPE html>
<!--
  ~ ******************************************************************************
  ~ Copyright (c) 2013-2014 CriativaSoft (www.criativasoft.com.br)
  ~ All rights reserved. This program and the accompanying materials
  ~ are made available under the terms of the Eclipse Public License v1.0
  ~ which accompanies this distribution, and is available at
  ~ http://www.eclipse.org/legal/epl-v10.html
  ~
  ~  Contributors:
  ~  Ricardo JL Rufino - Initial API and Implementation
  ~ ******************************************************************************
  -->
<html xmlns:ng="http://angularjs.org" ng-app="opendevice">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>OpenDevice | Dashboard</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link rel="icon" type="image/png" href="/images/favicon.png" />

    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!-- Ionicons -->
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">-->
    <!-- Theme style -->
    <link rel="stylesheet" href="css/AdminLTE.min.css">
    <link rel="stylesheet" href="css/skin-blue.min.css">

    <!-- angular ui-select-->
    <link rel="stylesheet" type="text/css" href="js/angular/angular-ui-select.min.css" media="screen" />
    <link rel="stylesheet" href="css/plugins/select2.css"/>
    <!--<link rel="stylesheet" href="css/plugins/selectize.default.min.css"/>-->
    <link rel="stylesheet" href="css/plugins/awesome-bootstrap-checkbox.css"/>

    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/icons/icons.css">


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="hold-transition skin-blue sidebar-mini sidebar-collapse">
<div class="wrapper" ng-controller="PageController as page">

    <!-- Main Header -->
    <header class="main-header">

        <!-- Logo -->
        <a class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>O.D</b></span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><b>Open</b>Tests</span>
        </a>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" target="_self" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>

            <p id="page-title" class="navbar-text">
                Tests
            </p>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">

        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar Menu -->
            <ul class="sidebar-menu">
                <!--<li class="header">HEADER</li>-->
                <!-- Optionally, you can add icons to the links -->
                <li><a href="#/"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a></li>
            </ul>
            <!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper" ng-animate="false" ng-view>



        <div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>





    </div>
    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    <footer class="main-footer">
        <!-- Default to the left -->
        <strong>Copyright &copy; 2016 <a href="http://opendevice.io">OpenDevice</a>.</strong> All rights reserved.
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">

    </aside>
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->
<script src="js/jquery-2.2.3.min.js"></script>

<script>
    // Defining AdminLTEOptions
    var AdminLTEOptions = {
        enableFastclick: true,
        enableControlSidebar : false,
        enableBSToppltip: true //Bootstrap.js tooltip
    };


    $(function(){


        Highcharts.chart('container', {

                    chart: {
                        type: 'gauge',
                        plotBackgroundColor: null,
                        plotBackgroundImage: null,
                        plotBorderWidth: 0,
                        plotShadow: false
                    },

                    title: {
                        text: false
                    },

                    pane: {
                        startAngle: -150,
                        endAngle: 150,
                        background: [{
                            backgroundColor: {
                                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                                stops: [
                                    [0, '#FFF'],
                                    [1, '#333']
                                ]
                            },
                            borderWidth: 0,
                            outerRadius: '109%'
                        }, {
                            backgroundColor: {
                                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                                stops: [
                                    [0, '#333'],
                                    [1, '#FFF']
                                ]
                            },
                            borderWidth: 1,
                            outerRadius: '107%'
                        }, {
                            // default background
                        }, {
                            backgroundColor: '#DDD',
                            borderWidth: 0,
                            outerRadius: '105%',
                            innerRadius: '103%'
                        }]
                    },

                    // the value axis
                    yAxis: {
                        min: 0,
                        max: 16000,

                        minorTickInterval: 'auto',
                        minorTickWidth: 1,
                        minorTickLength: 10,
                        minorTickPosition: 'inside',
                        minorTickColor: '#666',

                        tickPixelInterval: 30,
                        tickWidth: 2,
                        tickPosition: 'inside',
                        tickLength: 10,
                        tickColor: '#666',
                        labels: {
                            step: 2,
                            rotation: 'auto'
                        },
                        title: {
                            text: 'km/h'
                        },
                        plotBands: [{
                            from: 0,
                            to: 2000,
                            color: '#55BF3B' // green
                        }, {
                            from: 2000,
                            to: 6000,
                            color: '#DDDF0D' // yellow
                        }, {
                            from: 6000,
                            to: 16000,
                            color: '#DF5353' // red
                        }]
                    },

                    series: [{
                        name: 'Speed',
                        data: [80],
                        tooltip: {
                            valueSuffix: ' km/h'
                        }
                    }]

                },
// Add some life
// Add some life
                function (chart) {
                    if (!chart.renderer.forExport) {
                        setInterval(function () {
                            var point = chart.series[0].points[0],
                                    newVal,
                                    inc = Math.round((Math.random() - 0.5) * 20);

                            newVal = point.y + inc;
                            if (newVal < 0 || newVal > 200) {
                                newVal = point.y - inc;
                            }

                            point.update(newVal);

                        }, 3000);
                    }
                });


    });



</script>



<!-- ----------------------------------------------------- -->
<!-- OpenDevice -->
<!-- ----------------------------------------------------- -->

<script type="text/javascript" src="js/atmosphere.js"></script>

<!--<script type="text/javascript" src="js/opendevice.js"></script>-->
<!-- Development Files Coment in Production -->
<script type="text/javascript" src="js/Constants.js"></script>
<script type="text/javascript" src="js/Device.js"></script>
<script type="text/javascript" src="js/DeviceConnection.js"></script>
<script type="text/javascript" src="js/DeviceManager.js"></script>
<script type="text/javascript" src="js/OpenDeviceJS.js"></script>


<!-- mvn:dependency -->
<script type="text/javascript" src="js/app/extend.js"></script>
<script type="text/javascript" src="js/opendevice/DashItemView.js"></script>
<script type="text/javascript" src="js/opendevice/ChartItemView.js"></script>
<script type="text/javascript" src="js/opendevice/DigitalCtrlView.js"></script>
<script type="text/javascript" src="js/opendevice/ImageCtrlView.js"></script>

<script src="js/highcharts.js"></script>
<script src="js/highcharts-more.js"></script>
<script src="js/highcharts-solid-gauge.js"></script>

<script src="js/bootstrap.min.js"></script> <!-- Bootstrap 3.3.X -->
<script src="js/plugins/bootstrap-notify.min.js"></script> <!-- Bootstrap 3.3.X -->


<script src="js/adminlte-app.min.js"></script> <!-- AdminLTE Theme/js -->

<script src="js/spin.min.js"></script> <!-- Spinner -->

<!-- ----------------------------------------------------- -->
<!-- AngularJS Code -->
<!-- ----------------------------------------------------- -->

<script type="text/javascript" src="js/angular/angular.min-1.5.8.js"></script>
<script type="text/javascript" src="js/angular/angular-route.min.js"></script>
<script type="text/javascript" src="js/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="js/angular/angular-sanitize.min.js"></script> <!-- for ui-select -->
<script type="text/javascript" src="js/angular/angular-ui-select.min.js"></script>
<script type="text/javascript" src="js/angular/angular-animate.min.js"></script>

<link rel="stylesheet" type="text/css" href="js/angular/angular-gridster.min.css" media="screen"/>
<script type="text/javascript" src="js/angular/angular-gridster-resizedep.js"></script>
<script type="text/javascript" src="js/angular/angular-gridster.js"></script>

<!-- Loading bar-->
<!--<script type="text/javascript" src="js/plugins/nprogress.js"></script>-->
<!--<link rel="stylesheet" type="text/css" href="js/plugins/nprogress.css" media="screen"/>-->


</body>
</html>
